<template>
  <div class="tree-chain">
    <div class="lr-tree tree-main">
      <div class="b-before" :style="{'margin-top': befMarginTop + 'px' }">
        <!-- :class="bbeforeLen < 3 ? 'center' : bbeforeLen > 2 ? 'top-7' : ''" -->
        <div class="chain-area">
          <div class="item" v-for="(v, i) in bbefore" :key="i">
            <div class="ver-line right-20"
              v-if="i!==bbeforeLen-1"></div>
            <div class="left rel-line s-arrow"></div>
            <div class="main" @click="getBeforeBef(v, i)">
              <div class="title">{{v.name}}</div>
              <div class="main-info">
                <div class="main-li" v-for="vv in v.children" :key="vv.key" >
                  <span class="ml-pre">{{vv.key}}</span>
                  <span>{{vv.value}}</span>
                </div>
              </div>
            </div>
            <div class="right rel-line"></div>
          </div>
        </div>
      </div>

      <div class="before">
        <div class="chain-area" 
          :class="beforeLen < 3 ? 'center' : beforeLen > 2 ? 'top-7' : ''">
          <div class="item" v-for="(v, i) in before" :key="i">
            <div class="ver-line right-20"
              v-if="i!==beforeLen-1"></div>
            <div class="left rel-plus left-plus" v-if="bi!=i">+</div>
            <div class="left rel-line s-arrow" v-if="bi == i"></div>
            <div class="main" @click="getBefore(v, i)">
              <div class="title">{{v.name}}</div>
              <div class="main-info">
                <div class="main-li" v-for="vv in v.children" :key="vv.key" >
                  <span class="ml-pre">{{vv.key}}</span>
                  <span>{{vv.value}}</span>
                </div>
              </div>
            </div>
            <div class="right rel-line"></div>
          </div>
        </div>
      </div>
      
      <div class="current chain-area">
        <div class="item">
          <div class="left rel-line s-arrow"></div>
          <div class="main">
            <div class="title">{{current[0].name}}</div>
            <div class="main-info">
              <div class="main-li">
                <span class="ml-pre">{{current[0].children[0].key}}</span>
                <span>{{current[0].children[0].value}}</span>
              </div>
            </div>
          </div>
          <div class="right rel-line"></div>
        </div>
      </div>

    </div>
    <div class="rl-tree tree-main" :style="{'top': isAfterTop*aafterLen*50 + 'px'}">
      <div class="current chain-area center">
        <div class="item">
          <div class="left rel-line s-arrow"></div>
          <div class="main">
            <div class="title">{{current[0].name}}</div>
            <div class="main-info">
              <div class="main-li">
                <span class="ml-pre">{{current[0].children[0].key}}</span>
                <span>{{current[0].children[0].value}}</span>
              </div>
            </div>
          </div>
          <div class="right rel-line"></div>
        </div>
      </div>
      <div class="after">
        <div class="chain-area" 
          :class="afterLen < 3 ? 'center' : afterLen > 2 ? 'top-7' : ''">
          <div class="item" v-for="(v, i) in after" :key="i">
            <!-- :class="afterLen === 3 ? 'top-48' : ''"  -->
            <div class="ver-line left-20"
              v-if="i!==afterLen-1"></div>
            <div class="left rel-line s-arrow"></div>
            <div class="main" @click="getAfter(v, i)">
              <div class="title">{{v.name}}</div>
              <div class="main-info">
                <div class="main-li" v-for="vv in v.children" :key="vv.key" >
                  <span class="ml-pre">{{vv.key}}:</span>
                  <span>{{vv.value}}</span>
                </div>
              </div>
            </div>
            <div class="right rel-plus right-plus" v-if="ai != i">+</div>
            <div class="right rel-line a-arrow" v-if="ai == i"></div>
          </div>
        </div>
      </div>
      <div class="a-after" 
        :style="{'margin-top': aftMarginTop + 'px', 
                 'height': aafterH + 'px',
                 'transform': ' translate(' + aftTranX + 'px, 0px) scaleX(' + aftScale + ')',
                 'display': afShow ? 'block' : 'block'}">
        <div class="chain-area" 
          :class="aafterLen < 3 ? 'center' : aafterLen > 2 ? 'top-7' : ''">
          <div class="item" v-for="(v, i) in aafter" :key="i">
            <div class="ver-line left-20"
              v-if="i!==aafterLen-1"></div>
            <div class="left rel-line s-arrow"></div>
            <div class="main" @click="getAfterAft(v, i)">
              <div class="title">{{v.name}}</div>
              <div class="main-info">
                <div class="main-li" v-for="vv in v.children" :key="vv.key" >
                  <span class="ml-pre">{{vv.key}}:</span>
                  <span>{{vv.value}}</span>
                </div>
              </div>
            </div>
            <div class="right rel-line a-arrow"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'vueName',
  data () {
    return {
      beShow: false,
      bi: -1,
      bbefore: [
        {
          id: 1, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        // {
        //   id: 2, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
        // {
        //   id: 2, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
      ],
      before: [
        {
          id: 1, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 2, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
      ],
      current: [
        {
          id: 3, name: 'first', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
      ],
      after: [
        {
          id: 4, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 5, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 6, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 7, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        // {
        //   id: 8, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
        // {
        //   id: 8, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
        // {
        //   id: 8, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // }
      ],
      aafter: [
        {
          id: 4, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 5, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        {
          id: 5, name: 'lead', children: [
            {key: 'ID', value: '0923489284'}
          ]
        },
        // {
        //   id: 5, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
        // {
        //   id: 5, name: 'lead', children: [
        //     {key: 'ID', value: '0923489284'}
        //   ]
        // },
      ],
      afShow: false,
      ai: -1,
      // 配置 计算xx的偏移高度
      // oneH: 100,
      // itemH: 86, 
      // mbH: 14,
      befMarginTop: 0,
      aftMarginTop: 0,
      aftScale: 0,
      aftTranX: -107
    }
  },
  computed: {
    beforeLen() {
      return this.before.length
    },
    afterLen() {
      return this.after.length
    },
    bbeforeLen() {
      return this.bbefore.length
    },
    aafterLen() {
      return this.aafter.length
    },
    aafterH(){
      return 
        this.afterEmptyLen ?
          (this.afterLen + this.aafterLen + 1) * 100 :
          0
    },
    afterEmptyLen() {
      if(this.afterLen > this.aafterLen) {
        return this.afterLen - this.aafterLen
      }else {
        return false
      }
      return
    },
    beforeEmptyLen() {
      if(this.beforeLen > this.bbeforeLen) {
        return this.beforeLen - this.bbeforeLen
      }else {
        return false
      }
      return
    },
    isAfterOdd(){
      return this.afterLen % 2 ==1
    },
    isAfterTop() {
      return this.ai+1 < (this.aafterLen+1)/2  && this.ai > -1 && this.afterLen > this.aafterLen ? 1 : 0
    }
  },
  methods: {
    getBeforeBef(v, i) {
    },
    getBefore(v, i) {
      // console.log(v)
      this.bi = i
      this.befMarginTop = i*100
      if(this.beforeEmptyLen) {
        // console.log('xxb')
      }
    },
    getAfter(v, i) {
      // this.aafter=[...this.aafter, ...this.after]
      this.afShow = true
      this.aftScale = 1
      this.aftTranX = 0

      this.ai = i
      let al = this.afterLen
      let isOdd = al % 2 == 1
      let moveH = al > 1 && isOdd ? 200 : 200
      let moveN = isOdd ? 
                    ( i + 1 == (al+1) ? 0 : 
                      ( (i+1>(al+1)/2) ? (i+1-(al+1)/2) : ((al+1)/2-i-1) )  
                    ) : (
                      i+1>(al+1)/2 ? i+1-(al+1)/2 : (al+1)/2-i-1
                    ) 
      // - or + or 0  可把 pm 与 moveN 相结合
      let pm = isOdd ? 
                ( ( i + 1 == (al+1) / 2) ? 0 :  
                    (i + 1 < al / 2 ? -1 : 1) ) :
                ( i + 1 < (al+1)/2 ? -1 : 1 )
      // console.log(pm)
      console.log(moveN)
      
      if(this.afterEmptyLen) {
        this.aftMarginTop = pm * moveH * moveN
        // console.log(this.afterEmptyLen)
        // let allSecH = this.afterLen * 100 -14
        // let thiH = this.aafterLen * 100 - 14
        // let restH = allSecH - thiH
        // console.log(allSecH, thiH, restH)
      } else {
        
      }
    },
    getAfterAft(v, i) {

    }
  }
}
</script>
 
<style scoped lang="scss">
  .center{
    justify-content: center;
  }
  .flex-start{
    justify-content: flex-start;
  }
  .right-20{
    right: -20px;
  }
  .left-20{
    left: -20px;
  }
  // .top-7{
  //   top: 7px;
  // }
  .tree-chain{
    width: 1400px;
    // height: 314px;
    display: flex;
    flex-flow: column wrap;
    position: relative;
    overflow: auto;
    .tree-main{
      width: 700px;
      // height: 314px;
      // height: 400px;
      display: flex;
      flex-flow: row nowrap;
      position: relative;
    }
    .after,.a-after{
      display: flex;
      align-items: center;
    }
    .b-before{
      transition: all 0.5s;
      .chain-area{
        height: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        // background: #eee;
      }
    }
    .a-after{
      // height: 100%;
      transition: all 0.5s;
      .chain-area{
        height: 100%;
        // align-items: flex-start;
        justify-content: center;
        // background: #eee;
      }
    }
    ::-webkit-scrollbar-track-piece {
          // background-color: #fff; /*滚动条的背景颜色*/
          border-radius: 0; /*滚动条的圆角宽度*/
      }
      ::-webkit-scrollbar {
          width: 0px; /*滚动条的宽度*/
          height: 0px; /*滚动条的高度*/
      }
      ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
          height: 50px;
          background-color: #eee;
          border-radius: 4px;
          outline: 2px solid #fff;
          outline-offset: -2px;
          border: 2px solid #fff;
      }
    .chain-area{
      width: 214px;
      // height: 300px;
      overflow: auto;
      // margin: 7px 0px;
      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      // justify-content: center;
      align-items: center;
      position: relative;
      .item:last-child{
        margin-bottom: 0px;
        .rel-line::before{
          display: none;
        }
      }
      .item{
        width: 100%;
        height: 86px;
        margin-bottom: 14px;
        position: relative;
        .left{
          left: -20px;
        }
        .right{
          right: -20px;
        }
        .ver-line{
          position: absolute;
          top: 43px;
          width: 2px;
          height: 102px;
          z-index: 3;
          background: #ffa053;
        }
        .left-plus{
          left: -14px;
        }
        .right-plus{
          right: -14px;
        }
        .rel-plus{
          position: absolute;
          top: 36px;
          width: 14px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          border-radius: 50%;
          border: 1px solid #ee3377;
          z-index: 3;
        }
        .rel-line{
          position: absolute;
          width: 100px;
          height: 26px;
          background: url('./img/a_arrow.png') no-repeat;
          transform: scale(0.5, 0.5) translate(100px, -10px);
          top: 35px;
          z-index: 3;
        }
        .a-arrow{       
          transform: scale(0.5, 0.5) translate(100px, -10px);
        }
        .s-arrow{
          top: 35px;
          transform: scale(0.5, 0.5) translate(-100px, -10px);
        }
        .main{
          position: relative;
          background: #fff;
          transition: all 0.5s;
          width: 100%;
          background: #fff;
          padding: 0px 12px;
          border: 2px solid rgba(0,0,0,0.20);
          box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
          border-radius: 3px;
          transition: all 1s;
          .title{
            transition: all 0.5s;
            z-index: 3;
            width: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 5px;
          }
          .main-info{
            transition: all .5s;
            margin: 0 auto;
            height: 46px;
            .hidden {
              transition: all .5s;
              opacity: 0;
            }
            .main-li{
              margin-bottom: 5px;
              span{
                font-size: 12px;
                color: #333333;
                letter-spacing: 0.46px;
                display: inline-block;
              }
              .ml-pre{
                font-size: 13px;
                color: #A5A5A5;
                width: 50px;
                letter-spacing: 0.5px;
                text-align: right;
                margin-right: 5px;
              }
            }
          }
        }
        .main:hover{
          z-index: 10;
          border: 2px solid #3297FF;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.33);
          .title{
            color: #3297FF;
          }
          .main-info{
            height: 109px;
            .hidden{
              opacity: 1;
            }
          }
        }
      }
    }
  }
</style>